<template>
	<view class="verify_p" :id="viewId" v-if="on">
		<view class="verify_box">
			<view class="verify_view">
				{{ verifytips }}
			</view>
		</view>
	</view>
</template>

<script>
import { common } from '@/util/method.js';

import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'myVerifyPopup',
	props: {
		on: {
			type: [Boolean],
			default: false,
		},
		verifytips: {
			type: [String],
			default: 'qweqweqwe',
		},
	},
	watch: {},
	data() {
		return {
			viewId: 'verify_' + Math.random().toString(36).substr(2, 16),
		};
	},
	created() {
		// this.init_pagedata('mybtns');
	},
	mounted() {
		// this.$nextTick(() => {
		// 	this.getStickyH('#mybtns')
		// })
	},
	methods: {
		...common,
		init_pagedata_callback() {
			let _this = this;
			// _this.getStickyH('#mybtns')
		},
		// 获取元素距离顶部的高度
		getStickyH(id) {
			var _this = this;
			var query = uni.createSelectorQuery().in(_this);
			query.select(id)
				.boundingClientRect(res => {
					_this.height = res.height;
					_this.width = res.width;
					_this.render = 1;

					_this.$emit('setbot', res);
				})
				.exec();
		},
	},
};
</script>

<style lang="scss">
.verify_p {
	position: relative;

	.verify_box {
		position: absolute;
		left: 0;
		top: -14rpx;
		width: 100%;
		transform: translateY(-100%);
	}

	.verify_view {
		position: relative;
		display: inline-block;
		max-width: 100%;
		line-height: 1.6;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
		box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
		background-color: #000;
		color: #fff;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			transform: translate(30rpx, 50%) rotate(-45deg);
			border: 6rpx solid transparent;
			border-left-color: #000;
			border-bottom-color: #000;
			box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}
	}
}
</style>
